

div.processor-core {
    @background: @color-processor-core;
    @background-accent: darken(@background, 10%);

    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    min-width: 4em;
    height: 5em;
    margin: 1em;
    padding: 0.25em;
    font-size: 180%;
    background-image: repeating-conic-gradient( 
        @background 0deg, @background 30deg,
        @background-accent 31deg, @background-accent 60deg);
    animation: processor-core-rotating-background 6s infinite linear;
    background-size: cover;
    color: white;

    border-radius: 1em;

    img.processor{
        .create-background-image(6em, 0.6, 50%, 50%);
        transform: translateX(-50%) translateY(-50%);
    }

    .info{
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;

        button, .boost{
            .create-text-outlined(@font-family-header);
            font-size: 90%;
        }

        .boost {
            font-size: 130%;
        }
    }
}
